<template>
  <div>
    <!--标题-->
    <div class="d-flex justify-center pa-3 text-h4 font-weight-bold">{{artInfo.title}}</div>
    <div class="d-flex justify-center align-center">
      <v-icon>{{'mdi-calendar-month'}}</v-icon>
      <span>{{artInfo.CreatedAt | dateformat('YYYY-MM-DD HH:SS')}}</span>
    </div>
    <v-divider class="pa-3 ma-3"></v-divider>
    <!---->
    <v-alert class="ma-4" elevation="1" color="indigo" dark border="left" outlined>{{artInfo.desc}}</v-alert>
    <!---->
    <div class="content ma-5 pa-3 text-justify" v-html="artInfo.content"></div>
  </div>
</template>

<script>
export default {
  name: "Details",
  props: ['id'],
  data(){
    return{
      artInfo: {},
    }
  },
  created() {
    this.getArtInfo()
  },
  methods:{
    //查询文章
    async getArtInfo(){
      console.log(this.id)
      const {data:res} = await this.$http.get(`article/${this.id}`)
      this.artInfo = res.data
      console.log(this.artInfo)
    }
  }
}
</script>

<style scoped>
.content >>> img,
span,
p{
  width: 90%;
}
</style>